<template>
    <div class="top">
        <!--头部 -->
         <div class="header">
      <div class="containor">
        <!-- 点击行学天下时，跳转至首页，使用$router.go(-1) -->
        <div class="name" @click="$router.go(-1)">
          <img
            src="../assets/hhxy.png"
            alt="图片丢失"
            width="360px"
            height="80px"
          />
          </div>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <router-link to="/contact us">联系我们</router-link>
        </div>
      </div>
    </div>
        <div class="content">
        <span class="全部分类">全部分类</span>
        <hr/>
        <p class="计算机类">
        计算机类
        </p>
        <div class="第一排书">
        <img src="http://images.china-pub.com/ebook8080001-8085000/8084838/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8080001-8085000/8084836/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8080001-8085000/8084823/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8080001-8085000/8084656/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8080001-8085000/8084732/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8050001-8055000/8051166/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8075001-8080000/8079862/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <!--第一排书名-->
        <div class="第一排书名">
        <span style="font-size:12px;margin-left:70px;margin-right:55px">从0到一搭建自动化测试框架</span>
        <span style="font-size:12px;margin-left:18px;margin-right:55px">基于EEG的脑机接口</span>
        <span style="font-size:12px;margin-left:45px;margin-right:55px">金融商业数据分析</span>
        <span style="font-size:12px;margin-left:55px;margin-right:55px">Spring Data JPA</span>
        <span style="font-size:12px;margin-left:45px;margin-right:55px">解决方案架构师修炼之道</span>
        <span style="font-size:12px;margin-left:45px;margin-right:55px">机器学习实战</span>
        <span style="font-size:12px;margin-left:75px;margin-right:55px">Python程序设计</span>
        </div>
        <hr/>
        <p class="科技类">
        科技类
        </p>
        <div class="第二排书">
        <img src="http://images.china-pub.com/ebook8080001-8085000/8081510/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8075001-8080000/8078386/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8075001-8080000/8079727/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8075001-8080000/8076797/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8060001-8065000/8061455/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8070001-8075000/8073099/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8070001-8075000/8071765/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <!--第二排书名-->
        <div class="第二排书名">
        <span style="font-size:12px;margin-left:105px;margin-right:55px">5G NR标准</span>
        <span style="font-size:12px;margin-left:80px;margin-right:65px">增材制造设计指南</span>
        <span style="font-size:12px;margin-left:60px;margin-right:65px">蜂窝物联网</span>
        <span style="font-size:12px;margin-left:80px;margin-right:50px">5G核心网</span>
        <span style="font-size:12px;margin-left:105px;margin-right:65px">掘金小程序</span>
        <span style="font-size:12px;margin-left:70px;margin-right:65px">物联网运行的秘密</span>
        <span style="font-size:12px;margin-left:50px;margin-right:65px">物联网系统开发</span>
        </div>
        <hr/>
        <p class="人文心理类">
        人文心理类
        </p>
        <div class="第三排书">
        <img src="http://images.china-pub.com/ebook8080001-8085000/8082386/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8075001-8080000/8078503/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook4975001-4980000/4977543/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook3800001-3805000/3804143/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook3800001-3805000/3802921/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook3800001-3805000/3802681/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="http://images.china-pub.com/ebook8080001-8085000/8082393/zcover.jpg">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <!--第三排书名-->
        <div class="第三排书名">
        <span style="font-size:12px;margin-left:115px;margin-right:55px">情绪心智化</span>
        <span style="font-size:12px;margin-left:80px;margin-right:65px">重新认识焦虑</span>
        <span style="font-size:12px;margin-left:60px;margin-right:65px">拆除你的情绪地雷</span>
        <span style="font-size:12px;margin-left:70px;margin-right:65px">抑郁症</span>
        <span style="font-size:12px;margin-left:105px;margin-right:65px">控制焦虑</span>
        <span style="font-size:12px;margin-left:85px;margin-right:65px">幸福的化学作用</span>
        <span style="font-size:12px;margin-left:75px;margin-right:65px">快乐美学</span>
        </div>
        </div>
        
        </div>

</template>
<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
    };
    },
    methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
    },
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}

.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}

.content{
  font-family: "微软雅黑";
  font-size: 20px;
  margin-top: 10px;
}

.计算机类{
  margin-bottom: 20px;
}

.全部分类{
  margin-left: 75px;
  position: relative;
  top: 7px;
}

.计算机类{
  margin-left: 75px;
  position: relative;
  bottom: 7px;
  background-color: blue;
  color: rgb(255, 255, 255);
}

.第一排书{
  margin-left: 75px;
  cursor:pointer;
}

.第二排书{
  margin-left: 75px;
  cursor:pointer;
}

.第三排书{
  margin-left: 75px;
  cursor:pointer;
}

.科技类{
  background-color: rgb(255, 0, 0);
  color: rgb(255, 255, 255);
  margin-bottom: 20px;
  margin-left: 75px;
  position: relative;
  font-size: 20px;
}

.人文心理类{
  background-color: rgb(0, 255, 13);
  color: rgb(255, 255, 255);
  margin-left: 75px;
}

.第一排书名{
  cursor:pointer;

}
.第二排书名{
  position: relative;
  bottom: 20px;
  cursor:pointer;
}

.第三排书名{
  position: relative;
  bottom: 20px;
  cursor:pointer;
}
a {
    text-decoration: none;
    color: rgb(107, 105, 105);
  }
</style>